<!-- 
        作者：dailc
        时间：2017-08-29
        描述： css translate的开关与关闭（目前default和applet可以使用）
-->
<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>csstranslate list</title>
        <link rel="stylesheet" href="../../dist/debug/minirefresh.css" />
        <link rel="stylesheet" href="../common/common.css" />

    </head>

    <body>

        <nav class="navbar-header">
            <a class="nav-btn-left" href="../index.html">dashboard</a>
            csstranslate的设置
        </nav>
        <div class="content">

            <div id="minirefresh" class="minirefresh-wrap">

                <div class="minirefresh-scroll">

                    <div class="notice">
                        <p class="btn-switch">关闭csstranslate（当前开启）</p>
                    </div>

                    <ul class="data-list" id="listdata">

                    </ul>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="../../dist/debug/minirefresh.js"></script>
        <script type="text/javascript" src="../common/common.js"></script>
        <script>
            var appendTestData = Common.appendTestData,
                bindEvent = Common.bindEvent,
                // 记录一个最新
                maxDataSize = 30,
                listDom = document.querySelector('#listdata'),
                requestDelayTime = 600,
                isCssTranslate = true;

            var miniRefresh = new MiniRefresh({
                container: '#minirefresh',
                down: {
                    // 本主题的特色，是否开启wrap的css translate
                    // 虽然继承自default的主题也有这个变量，但是目前只建议在defaul和applet中使用
                    // default默认是关闭的 applet默认是开启的
                    isWrapCssTranslate: isCssTranslate,
                    callback: function() {
                        setTimeout(function() {
                            // 每次下拉刷新后，上拉的状态会被自动重置
                            appendTestData(listDom, 10, true);
                            miniRefresh.endDownLoading(true);
                        }, requestDelayTime);
                    }
                },
                up: {
                    isAuto: true,
                    callback: function() {
                        setTimeout(function() {
                            appendTestData(listDom, 10);
                            miniRefresh.endUpLoading(listDom.children.length >= maxDataSize ? true : false);
                        }, requestDelayTime);
                    }
                }
            });

            bindEvent('.btn-switch', function() {
                if (isCssTranslate) {
                    this.innerText = '开启csstranslate（当前关闭）';
                    isCssTranslate = false;
                } else {
                    this.innerText = '关闭csstranslate（当前开启）';
                    isCssTranslate = true;
                }
                miniRefresh.refreshOptions({
                    down: {
                        isWrapCssTranslate: isCssTranslate                      
                    }
                });
            }, 'click');
        </script>
    </body>

</html>